<template>
  <div>

    <div class="PageItem">
      <el-row class="PageInfo">
        <i class="info-bar"></i>寄存费用
      </el-row>
      <el-row class="PageInfo">
        <el-table :data="tableData" border style="width: 100%" :height="300">
          <el-table-column prop="renewType" label="寄存类型"></el-table-column>
          <el-table-column prop="startDate" label="开始日期"></el-table-column>
          <el-table-column prop="renewYearNumber" label="寄存时间">
          </el-table-column>
          <el-table-column prop="endDate" label="到期日期"></el-table-column>
          <el-table-column prop="itemPrice" label="单价"></el-table-column>
          <el-table-column prop="itemCharge" label="金额"></el-table-column>
          <el-table-column prop="asSettled" label="结算状态"></el-table-column>
          <el-table-column fixed="right" label="操作">
            <template slot-scope="scope">
              <el-button
                @click="newExpenses('modify', scope.row)"
                type="text"
                size="small"
              >修改
              </el-button
              >
              <el-button
                type="text"
                size="small"
                @click="DeleteDeposit(scope.row)"
              >删除
              </el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-row
      >

      <el-dialog
        :title="title"
        :visible.sync="dialogTableVisible"
        v-dialogDrag
        width="800px"
      >
        <el-table
          v-if="title === '寄存费用新增'"
          ref="multipleTable"
          :data="NewData"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column prop="itemName" label="收费项目"></el-table-column>
          <el-table-column prop="itemPrice" label="单价"></el-table-column>
          <el-table-column prop="itemNumber" label="数量"></el-table-column>
          <el-table-column prop="itemUnit" label="单位"></el-table-column>
          <el-table-column prop="itemCharge" label="总金额"></el-table-column>
          <el-table-column prop="discountCharge" label="优惠"></el-table-column>
          <el-table-column prop="asSettled" label="结算状态"></el-table-column>
        </el-table>
        <el-form
          :model="form"
          v-if="title === '寄存修改'"
          ref="form"
          :rules="rules"
        >
          <el-row>
            <el-col :span="12">
              <el-form-item label="逝者编号" prop="businessCode">
                <el-input
                  v-model="form.businessCode"
                  autocomplete="off"
                  readonly
                ></el-input>
              </el-form-item
              >
            </el-col>
            <el-col :span="12">
              <!-- <el-form-item label="逝者编号" :label-width="formLabelWidth">
                <el-input
                  v-model="form.name"
                  autocomplete="off"
                ></el-input> </el-form-item
            > -->
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="数量">
                <el-input
                  v-model.number="form.renewNumber"
                  autocomplete="off"
                ></el-input>
              </el-form-item
              >
            </el-col>
            <el-col :span="12">
              <el-form-item label="单价">
                <el-input
                  v-model="form.itemPrice"
                  autocomplete="off"
                ></el-input>
              </el-form-item
              >
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="费用">
                <el-input
                  v-model="form.itemCharge"
                  autocomplete="off"
                ></el-input>
              </el-form-item
              >
            </el-col>
            <el-col :span="12">
              <el-form-item label="收费日期">
                <el-input v-model="form.chargeTime"></el-input>
              </el-form-item
              >
            </el-col>
          </el-row>
          <!-- <el-row>
            <el-col :span="12">
              <el-form-item label="优惠减免" :label-width="formLabelWidth">
                <el-input v-model="form.name"></el-input> </el-form-item
            ></el-col>
          </el-row> -->

          <el-form-item label="备注" style="width: 1000px">
            <el-input
              v-model="form.remark"
              type="textarea"
              :rows="2"
              placeholder="请输入内容"
            ></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="clearSelection">取 消</el-button>
          <el-button type="primary" @click="Save">确 定</el-button>
        </div>
      </el-dialog>
    </div>


    <div class="PageItem" v-if="showListStatus">
      <el-row class="PageInfo">
        <i class="info-bar"></i>其他费用
        <el-button
          type="primary"
          style="float: right"
          @click="newExpenses('add')"
        >新增费用
        </el-button
        >
      </el-row>

      <el-row class="PageInfo">
        <el-table :data="showList" border style="width: 100%" :height="300">
          <el-table-column prop="itemName" label="收费项目"></el-table-column>
          <el-table-column prop="itemPrice" label="单价"></el-table-column>
          <el-table-column prop="itemNumber" label="数量"></el-table-column>
          <el-table-column prop="itemUnit" label="单位"></el-table-column>
        </el-table>
      </el-row
      >

    </div>
  </div>
</template>

<script>
  import * as Type from "@/api/service";

  export default {
    props: {
      tableData: {
        type: Array,
      },
      showList: {
        type: Array,
      },

      businessCode: {
        type: String,
      },
      dbid: {
        type: Number,
      },
      showListStatus: {
        type: Boolean,
      }
    },
    mounted() {
      console.log("qq");
    },
    data() {
      return {
        dialogTableVisible: false,
        chargeItems: [],
        multipleSelection: "", //多选数据
        title: "",
        tableDatas: this.tableData,
        form: {
          //弹框表单
        },
        NewData: [],
        rules: {
          businessCode: [
            {required: true, message: "请选择单位", trigger: "blur"},
          ],
        },
      };
    },
    computed: {},
    watch: {},
    methods: {
      Save() {
        if (this.title === "寄存费用新增") {
          console.log(this.businessCode, this.multipleSelection);
          // this.$refs.multipleTable.clearSelection();

          this.multipleSelection.forEach((item, index) => {
            item.serviceItemId = item.id;
            item.itemCharge = item.itemNumber * item.itemPrice;
            delete this.multipleSelection[index]["id"];
          });

          Type["saveDepositChargesServiceItems"]({
            businessCode: this.businessCode,
            goodsServices: this.multipleSelection,
          }).then((response) => {
            console.log(response, 3333);
            // const { data } = response;
            // // return;
            if (!response.code) {
              this.saveFlag = false;
              this.$message(response.message);
              return;
            }
            this.$message(response.message);
            this.dialogTableVisible = false;
          });
        } else {
          this.$refs["form"].validate((valid) => {
            if (valid) {
              Type["saveDepositCharges"]({
                itemNumber: this.form.renewNumber,
                ...this.form,
              }).then((response) => {
                // const { data } = response;
                // // return;
                if (!response.code) {
                  this.saveFlag = false;
                  this.$message(response.message);
                  return;
                }
                this.$message(response.message);
                this.getlist();
                this.dialogTableVisible = false;
              });


              this.dialogTableVisible = false;
            } else {
              console.log("error submit!!");
              return false;
            }
          });
        }
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
        console.log(this.multipleSelection);
      },
      clearSelection() {
        console.log(this.multipleSelection);
        if (this.title === "寄存费用新增") {
          this.$refs.multipleTable.clearSelection();
        }
        this.dialogTableVisible = false;
      },
      newExpenses(express, data) {
        console.log(this.business, 222);
        console.log("request");
        if (express === "add") {
          this.title = "寄存费用新增";

          Type["loadDepositChargesServiceItems"]().then((response) => {
            console.log(response, 3333);
            // const { data } = response;
            // // return;
            if (!response.code) {
              this.saveFlag = false;
              this.$message(response.message);
              return;
            }

            this.NewData = response.data;
            // this.tableData =[]
          });
        } else {
          this.title = "寄存修改";
          this.form = JSON.parse(JSON.stringify(data));
        }
        this.dialogTableVisible = true;
      },
      DeleteDeposit({
                      chargeItemId,
                      chargeItemVersion,
                      chargeSettleId,
                      createUserId,
                    }) {
        console.log(
          chargeItemId,
          chargeItemVersion,
          chargeSettleId,
          createUserId
        );
        Type["DeleteDepositCharges"]({
          chargeItemId,
          chargeItemVersion,
          chargeSettleId,
          createUserId,
        }).then((response) => {
          console.log(response);
          // const { data } = response;
          // // return;
          if (!response.code) {
            this.saveFlag = false;
            this.$message(response.message);
            return;
          }
          this.getlist();
        });
      },
      getlist() {
        Type["loadDepositCharges"]({businessCode: this.businessCode}).then(
          (response) => {
            const {data} = response;
            if (!data) {
              this.loading = false;
              this.$message("数据读取失败");
              return;
            }

            data.depositRenewItems.forEach((item) => {
              if (item.asSettled) {
                item.asSettled = "已结算";
              } else {
                item.asSettled = "未结算";
              }
            });

            this.tableDatas = data.depositRenewItems;
            this.showList = data.chargeItems;
            console.log(this.chargeItems)
            this.$emit("input", this.tableDatas);
          }
        );
      },
    },
  };
</script>

<style scoped>
  .el-textarea {
    width: 650px;
  }

  /* 弹框文字白色 */
  .PageItem /deep/ .el-dialog__title, .PageItem /deep/ .el-dialog__headerbtn .el-dialog__close {
    color: #fff;
  }
</style>
